@import './variables.scss';
@import './theme/index';
// @import './element-variables.scss';

a{
  text-decoration: none;
}
#app {
    .main-container {
      min-height: 100%;
      transition: margin-left .28s;
      position: relative;
      min-height: 100vh;
      .el-container{
        height: 100vh;
      }
    }
     .el-aside{
        transition: width 0.28s;
        width: $sideBarWidth !important;
        height: 100%;
        overflow: hidden;
        @include background_color("menuBg");
        .logo{
          display: flex;
          color: #fff;
          align-items: center;
          width: 168px;
          height: 60px;
          border-right: 1px solid transparent;
          overflow: hidden;
          .spanlogo{
              background: url("../assets/logo.png") no-repeat left top;
              width: 147px;
              height: 35px;
              background-size: auto 100%;
              display: block;
              margin: 0 10px;
           }
          img{
              width: auto;
              height: 35px;
              display: inline-block;
              vertical-align: middle;
              margin:0 10px;
          }
          .svg-icon{
            height: 40px;
            width: 180px;
          }
        }
      //   .logo{
      //     height: 50px;
      //     line-height: 50px;
      //     display: flex;
      //     overflow: hidden;
      //     justify-content: center;
      //     color: #fff;
      //     text-decoration: none;
      //     padding: 0 10px;
      //     @include font_color("menuText"); 
      //     transition: all 0.2s linear;
         
      //     img{
      //         width: auto;
      //         height: 30px;
      //         margin-top: 10px;
      //     }
      //     span{
      //        flex: 1;
      //         overflow: hidden;
      //         padding:0 20px 0 10px;
      //     }
      //  }
        .el-menu-vertical-demo{
          background: none;
          border:none;
        }
       
    }
    .main-container.hideSidebar{
      .el-aside{
       width: 64px !important;
       .el-submenu__icon-arrow{
        display: none;
       }
      }
      .el-header .logo , .el-aside .logo{
        width: 64px !important;
        overflow: hidden;
        border-radius: 50%;
        .spanlogo{
          height: 35px;
          border-radius: 50%;
        }
      }
   }
   .main-container.mobile{
    .el-aside{
     width: 0px !important;
    }
 }
  .openSidebar.mobile{
    .el-aside{
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 210px !important;
      z-index: 10001;
     }
     .drawer-bg{
      width: 100%;
      height: 100%;
      display: block;
      top: 0;
      left: 0;
      position: absolute;
      z-index: 1000;
      background: rgba(0,0,0,0.5);
     }
  }
}
.el-menu{
  // @include background_color("menuBg");
  color: #fff;
  @include background_color("menuBg");
  .el-menu-item ,.el-submenu__title , i{
    color: #fff;
  }
 .el-menu-item:focus, .el-menu-item:hover ,.el-menu-item:hover i{
   
    @include background_color("subMenuHover");
    color: #fff;
  }
  .el-submenu__title:hover  {
    background: rgba(255,255,255,0.5);
    @include background_color("menuHover");
    color: #fff;
  }
  .el-menu {
    background: #fff;
  
    @include background_color("menuHover");
    .svg-icon{
      width: 1.2em;
      height: 1.2em;
    }
  }
  .el-menu-item.is-active{
    // @include background_color("subMenuHover");
    @include background_color("subMenuBg");
    // @include font_color("subMenuBg");
    // background: none !important;
    color: #fff;
    i{
      color: #fff;
    }

  }
 }

.el-header{
  background: #fff;
  // background: $--color-primary;
  padding: 0 20px 0 0 !important;
  border-bottom: 1px solid #eee;
  color: #444;
  .svg-icon{
    fill: #444;
    color: #444;
    font-size: 12px;
  }
  .hamburger{
    font-size: 22px;
    margin-right: 20px;
    color: #444;
    height: 30px;
    padding:15px 17px;
    overflow: hidden;
    line-height: 30px;
    cursor: pointer;

  }
  .logo{
    float: left;
    display: flex;
    color: #fff;
    align-items: center;
    width: 168px;
    height: 60px;
    border-right: 1px solid transparent;
    overflow: hidden;
    .spanlogo{
        background: url("../assets/logo.png") no-repeat left top;
        width: 147px;
        height: 35px;
        background-size: auto 100%;
        display: block;
        margin: 0 10px;
     }
    img{
        width: auto;
        height: 35px;
        display: inline-block;
        vertical-align: middle;
        margin:0 10px;
    }
    .svg-icon{
      height: 40px;
      width: 180px;
    }
  }
}
.el-submenu .el-menu-item{
  min-width: 168px;
  padding: 0 20px;
}
body{
  min-width: 750px;
  ::-webkit-scrollbar { width: 6px; height: 6px;@include background_color("menuText");    }
  ::-webkit-scrollbar-button { width: 0; height: 0; }
  ::-webkit-scrollbar-corner { display: block; }
  ::-webkit-scrollbar-thumb { background-clip: padding-box;  background: #606060 ; border-radius: 3px; }

}
.title_bt{
    min-height: 45px;
    line-height: 45px;
    background: #fff;
    user-select: none;
    border-radius: 3px;
    margin-bottom: 10px;
    span{
      font-size: 12px;
      color: #999;
      padding-left: 10px;
        
    }
    .bt{
      float: left;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      color:#333;
      padding: 0 15px;
      &.on{
        @include background_color("menuBg");
        color: #fff;
        &:hover{
          @include background_color("subMenuBg");
          color: #fff;
        }
      }
      &.on2{
        border-top: 2px solid;
        @include border_color("menuBg");
        cursor: default;
        &:hover{
          background: none;
          opacity: 1 !important;
        }
        i{
          margin-right: 5px;
        }

      }
     
      &.hui{
        opacity: 0.3;
      }
      &:hover{
        background-color: #dee0e0;
        color:#555;
      }
    }
    .search{
      float: right;
      display: flex;
      background: #fff;
      border:1px solid #eee;
      height: 30px;
      line-height: 30px;
      align-items: center;
      margin-top: 7px;
      border-radius: 3px;
      margin-right: 10px;
      .el-input{
        height: 30px;
        line-height: 30px;
        border:none;
        overflow: hidden;
        input{
          width: 100%;
          height: 100%;
          border:none;
        }

      }
      .button{
        padding: 0 5px;
        cursor: pointer;
        color: #333;
      }
    }
    &::after{
      content: '';
      clear: both;
      display: block;
    }
}
.search_show{
    border:1px solid #b1c9f4;
    padding: 15px;
    margin: 10px 0;
    background: #fff;
    .card{
        display: flex;
        overflow: hidden;
        align-items: center;
        margin: 10px 0;
        .bt{
          font-size: 13px;
          color: #333;
          padding-right: 10px;
        }
        .cardflex1{
          flex: 1;
          overflow: hidden;
          .el-date-editor--daterange.el-input__inner{
            width: 100%;
            max-width: 350px;
          }
        }
        .el-button{
          margin:  0 10px;
        }
    }
}
.tablebox{
  .el-table__header-wrapper{
      background: #f7f7f7;
      tr{
        background: none;
      }
  }
  .p{
     line-height: 20px;
     padding: 5px 0;
     span{
      font-weight: bold;
      &:first-child{
        padding-right: 5px;
      }
      &:last-child{
        padding-left: 5px;
      }
     }
     a{
      color: #377dff;
      padding-left: 5px;
     }
  }
   
  .link2{
    font-size: 12px;
  }
  .linkurl{
    color: #377dff;
    text-decoration: underline;
    &:hover{
      cursor: pointer;
    }
  }
  .el-dropdown{
    font-size: 12px;
    color: #1890ff;
    margin-left: 10px;
    .el-dropdown-link{
      cursor: pointer;
    }
  }
}
.pageswarp.el-pagination{
  padding:  20px 0 0 0;
  text-align: center;
}
.panelgroup{
  .panel{
    &:nth-of-type(1) .cardpanel .ico_{background: #40c9c6;}
    &:nth-of-type(2) .cardpanel .ico_{background: #36a3f7;}
    &:nth-of-type(3) .cardpanel .ico_{background: #f4516c;}
    &:nth-of-type(4) .cardpanel .ico_{background: #34bfa3;}
  }
    .cardpanel{
      display: flex;
      align-items: center;
      color: #555;
      padding-bottom: 20px;
      .ico_{
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #377dff;
        text-align: center;
        line-height: 30px;
        color: #fff;
        margin-right: 10px;
      }
      .infor{
        flex:1;
        overflow: hidden;
        padding-right: 20px;
        p{
          height: 30px;
          line-height: 30px;
          font-size: 22px;
          overflow: hidden;
          border-bottom: 1px solid #e1e1e1;
        }
        .title{
          padding-top: 5px;
             & > span{
              font-weight: bold;

             }
             .ico{
              display: inline-block;
              vertical-align: middle;
              width: 18px;
              height:18px;
              color: #fff;
              background: #377dff;
              font-size: 12px;
              text-align: center;
              line-height:18px;
              border-radius: 50%;
              margin: -2px 0 0 5px;
             }
        }
      }
    } 
}
.carttitlebox{
  background: #fff;
  border-bottom: 3px solid #f5f5f5;
  margin-bottom: 20px;
  line-height: 40px;
  padding: 10px;
  height: 40px;
  .bt{
      color: #888;
      font-size: 14px;
      font-weight: bold;
      float: left;
      span{
        margin-right: 20px;
        cursor: pointer;
        &.on{
          color: #377dff;
        }
      }
  }
  .select{
      float:right;
      input{
          border:none !important
      }
      .el-input__inner{
        background: none;
        border:none;
        background: #f5f5f5;
      }
  }
}
.echartsbox{
   margin-bottom: 20px;
}

.el-tooltip__popper{
  max-width: 200px;
}
// 弹出drawer
.demo-drawer{
  .el-drawer__header{
    @include background_color("menuBg");
    color: #fff;
    padding: 20px;
    height: 20px;
    line-height: 20px;
  }
  .demo-drawer__content{
    height: 100%;
    .demo-drawer__content_from{
        display: flex;
        height: 100%;
        flex-direction: column;
        .el-radio{
          line-height: 40px;
        }
        .from{
          padding: 0 20px;
           flex: 1;
           overflow: hidden;
           .el-scrollbar{
            height: 100%;
           }
           .bt_h2{
            padding-bottom: 20px;
            font-size: 20px;
            color: #333;
           }
           .ico{
              display: inline-block;
              vertical-align: middle;
              width: 18px;
              height:18px;
              color: #fff;
              background: #377dff;
              font-size: 12px;
              text-align: center;
              line-height:18px;
              border-radius: 50%;
              margin: -2px 10px 0;
              cursor: pointer;
           }
           .tablebox{
              display: flex;
              .bt_{
                padding: 0 10px;
                border-bottom:1px solid #dfe6ec;
                background: #ebebeb;
                .fr{
                  float: right;
                }
              }
              .table_{
                background: #f5f5f5;
                border:1px solid #dfe6ec;
                border-bottom: none;
                width: 300px;
                .el-table {
                  background-color: #f5f5f5 !important;
                  th.el-table__cell , tr{
                    background-color: #f5f5f5 !important;
                  }
                  tr{
                    cursor: pointer;
                  }
                  .cell{
                    white-space: nowrap;
                  }
                  .el-table-column--selection .cell{
                    padding: 0 5px;
                  }
                  .el-table__cell{
                    padding: 5px;
                  }  
                  .el-input{
                    width: 120px;
                    max-width: 120px;
                    min-width: 120px;
                  }

                }
              }
              .table_material{
                width: 600px;
                & > .el-button{
                  margin-bottom: 10px;
                }
                .el-input {
                    width: auto;
                    max-width: 60px;
                    min-width: 60px;
                }
              }
              .table_default{
                width: 450px;
                margin-right: 10px;
              }

           }
           .p_line{
               .el-switch{
                margin-bottom: 20px;
               }
           }
         
           .el-form-item__content{
            display: flex;
            // overflow: hidden;
            .el-textarea, .el-input{
              width: auto;
              max-width: 400px;
              min-width: 300px;
            }
            p{
              flex: 1;
              overflow: hidden;
              color: #827b7b;
              padding-left: 10px;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .select_box{
              .el-input{
                width: auto;
                max-width: 120px;
                min-width: 100px;
              }
           }
           }
           .textarea{
              background: #eee;
              border-radius: 5px;
              padding: 10px;
              .bt{
                color: #606266;
              }
              .el-textarea{
                width: 400px;
                background: none;
                .el-textarea__inner{
                    min-height: 300px;
                }
              }
           }
           .textarea_mr{
            background: #eee;
            border-radius: 5px;
            padding: 10px;
            min-width: 500px;
            min-height: 300px;
            max-width: 600px;
            max-height: 600px;
            overflow-y: auto;
            outline: none;
        }
        .el-textarea_wrap{
          max-width: none !important;
        }
        .el-textarea_wrap  .el-textarea__inner{
          min-width: 70vw;
          max-width: 800px !important;
          background: #eee;
          font-size: 15px;
        }
        .el-upload-list--picture-card .el-upload-list__item-thumbnail{
          object-fit: scale-down;
        }
        .ul_{
          .li_{
            margin-bottom: 10px;
            .el-button{
              margin-left: 10px;
            }
          }
        }
        }
        .el-tree{
          height: 100%;
          overflow-y: auto;
          .el-tree-node__content{
              height: 50px;
              width: 100%;
             
          }
          .el-tree-node__label{
            font-size: 16px;
          }
          & > .el-tree-node {
            margin-bottom: 20px;
          }
         & > .el-tree-node > .el-tree-node__content{
            background: #f1f1f1;
          }

        }
        .codefrombox{
           .tabbox{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #d5d2d2;
           margin-bottom: 10px;
            span{
              display: block;
              float: left;
              padding: 0 15px;
              border:1px solid #d5d2d2;
              margin-left: 10px;
              cursor: pointer;
              background: #f8f8f8;
              &.on{
                background: #fff;
                border-bottom: none;
              }

            }
           }
           .p_{
             line-height: 2;
             font-size:12px;
             span{
              font-weight: bold;
              font-size: 14px;
             }
           }
           .tips{
            font-size: 12px;
            padding: 10px 0;
            span{
              background: #1890ff;
              width: 20px;
              height: 20px;
              display: inline-block;
              vertical-align: middle;
              color: #fff;
              text-align: center;
              border-radius: 50%;
              margin: -2px 5px 0 0;
              font-size: 12px;
              line-height: 20px;
            }
           }
           .box_{
            padding-bottom: 20px;
               .p_bt{
                font-weight: bold;

               }
               .codebox{
                background: #ddd;
                margin: 10px;
                padding-bottom: 10px;
                border-radius: 5px;
                font-size: 14px;
               line-height: 20px;
               }
           }
        }
        .demo-drawer__footer{
            padding: 20px;
            border-top: 1px solid #ddd;
            .el-button{
              min-width: 150px;
              text-align: center;
            }
            .fr{
              float: right;
              padding-top: 10px;
            }
            .but{
              padding: 0 10px;
              margin-left: 20px;
              color: #606266;
              cursor: pointer;
            }
        }
    }

  }
}
// 公共弹层的样式
.layeralterelbox{
   border:none;
  .el-message-box__header{
    @include background_color("menuBg");
    height: 40px;
    line-height: 40px;
    padding: 0;
    .el-message-box__title{
      color: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
    }

  }
  .el-message-box__headerbtn{
    top: 10px;
    .el-message-box__close{
      color: #fff;
    }
  }
  .el-message-box__content{
    text-align: center;
    padding: 20px 15px;
    font-size: 15px;

  }
  .el-message-box__message{
    text-align: center;
    p{
      line-height: 30px;
    }
  }
  .el-message-box__btns{
    text-align: center;
    .el-button{
      min-width: 120px;
     text-align: center;
    }
  }
}
.el-table .cell .el-button.el-button--primary, 
.el-table .cell .el-button.el-button--success, 
.el-table .cell .el-button.el-button--warning, 
.el-table .cell .el-button.el-button--danger
{
  padding: 5px 3px;
  margin: 0 5px;

}
.popperClass{
  line-height: 20PX;
}
.p_line_tishi{
  font-size: 13px;
  line-height: 1.8;
  padding-bottom: 15px;
  color: #606266;
  max-width: 1200px;
  text-indent: 2em;
}

.tablist .el-tabs__content{
  width:580px;
  background: #f8f8f8;
  padding: 10px;
 
  .ul_tab .li_tab{
      float:left;
      width: 76px;
      height: 30px;
      line-height: 30px;
      margin: 0;
      text-align: center;
      background: #ebebeb;
      margin: 10px 20px;
      list-style: none;
      cursor: pointer;
      &.on{
          background: #1890ff;
          color: #fff;
      }
  }
  .ico{
     display: inline-block;
     vertical-align: middle;
     margin: 10px 20px 0px 20px;
      height: 18px;
      line-height: 18px;
      background: rgba(0, 0, 0, 0.3);
      color: #fff;
      width: 18px;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      margin-right: 5px;
      font-size: 12px;
    }
  .el-form-item{
      padding-bottom: 20px;
  }
  .el-form-item__content{
      .el-input{
          max-width: 150px !important;
          min-width: 150px !important;
      }
  }
}
.el-select-dropdown__wrap{
  max-height: 355px;
}
 